<template>
  <div class="devOverview" :style="{transform:'scale('+scaleNum+')','transform-origin':'0px 0px'}">
    <div class="title">
      <div class="logo" @click="goChooseBoard" v-focusable></div>
      <div :class="languageStr==='English'?'chinacontent':'encontent'">
        <span>{{ languagePack.one }}</span>
      </div>
      <div class="lightBox"></div>
      <div class="timer">
        <span>{{ time }}</span>
      </div>
      <div class="laugBox" @click="changeLaug">
        <div class="changeLau" v-focusable>
          <img width="38px" v-if="languageStr==='简体中文'" src="~images/bigScreen/motorFactory/china.png" alt/>
          <img width="38px" v-if="languageStr==='English'" src="~images/bigScreen/motorFactory/english.png"
               alt/>
          <span>{{ languageStr }}</span>
        </div>
      </div>
    </div>
    <div class="mainContent">
      <div class="leftBox">
        <div class="bigBox">
          <span class="boxtitle">{{ languagePack.two }}</span>
          <div class="devTotal">
            <div class="devTotaleChart" id="statusRatio">

            </div>
            <div class="devTotaleChart1">
              <div class="statusline">
                <div class="procontent">
                  <span>{{ languagePack.sixteen }}</span>
                  <span>{{ totalData.statusObj.runratio }}%</span>
                </div>
                <Progress :percent="totalData.statusObj.runratio" hide-info stroke-color="rgb(55,211,118)"
                          :stroke-width="8"/>
                <div class="procontent">
                  <span>{{ totalData.statusObj.runcount }}{{ languagePack.twenty }}</span>
                </div>
              </div>
              <div class="statusline">
                <div class="procontent">
                  <span>{{ languagePack.seventeen }}</span>
                  <span>{{ totalData.statusObj.waitratio }}%</span>
                </div>
                <Progress :percent="totalData.statusObj.waitratio" hide-info stroke-color="rgb(254,130,83)"
                          :stroke-width="8"/>
                <div class="procontent">
                  <span>{{ totalData.statusObj.waitcount }}{{ languagePack.twenty }}</span>
                </div>
              </div>
              <div class="statusline">
                <div class="procontent">
                  <span>{{ languagePack.eighteen }}</span>
                  <span>{{ totalData.statusObj.alarmratio }}%</span>
                </div>
                <Progress :percent="totalData.statusObj.alarmratio" hide-info stroke-color="rgb(247,28,47)"
                          :stroke-width="8"/>
                <div class="procontent">
                  <span>{{ totalData.statusObj.alarmcount }}{{ languagePack.twenty }}</span>
                </div>
              </div>
              <div class="statusline">
                <div class="procontent">
                  <span>{{ languagePack.nineteen }}</span>
                  <span>{{ totalData.statusObj.shutratio }}%</span>
                </div>
                <Progress :percent="totalData.statusObj.shutratio" hide-info stroke-color="rgb(92,105,141)"
                          :stroke-width="8"/>
                <div class="procontent">
                  <span>{{ totalData.statusObj.shutcount }}{{ languagePack.twenty }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="devOeebg">
            <div class="oeeone" id="openRateEchartDiv"></div>
            <div class="oeetwo">
              <div class="twooeeleft"></div>
              <div class="twooeeright">
                <div class="oeerightBox">
                  <div class="rightboxTitle">
                    <span>{{ languagePack.fourteen }}</span>
                  </div>
                  <div class="rightboxPro">
                    <div class="boxProhalf"><span>{{ totalData.monthNee || 0 }}%</span></div>
                    <div class="boxProhalf1">
                      <Progress :percent="totalData.monthNee>100?100:totalData.monthNee||0" hide-info stroke-color="rgb(72,187,255)"
                                :stroke-width="8"/>
                    </div>
                  </div>
                </div>
                <div class="oeerightBox1">
                  <div class="rightboxTitle">
                    <span>{{ languagePack.fifteen }}</span>
                  </div>
                  <div class="rightboxPro">
                    <div class="boxProhalf"><span>{{ totalData.historyYTD || 0 }}%</span></div>
                    <div class="boxProhalf1">
                      <Progress :percent="totalData.historyYTD>100?100:totalData.historyYTD||0" hide-info stroke-color="rgb(72,187,255)"
                                :stroke-width="8"/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="devYeildbg">
            <div class="yeildDay">
              <span class="onespan">{{ totalData.dayYield }}<span class="onespanchild">{{ languagePack.twenty }}</span></span>
              <span class="twospan">{{ languagePack.twentyone }}</span>
            </div>
            <div class="yeildMonth">
              <span class="onespan">{{ totalData.monthYield }}<span
                class="onespanchild">{{ languagePack.twenty }}</span></span>
              <span class="twospan">{{ languagePack.twentytwo }}</span>
            </div>
            <div class="classyeild">
              <span>{{ languagePack.twentythree }} {{ totalData.shiftYield || 0 }}{{ languagePack.twenty }}</span>
            </div>
            <div class="classyeildPro">
              <div class="yeildproval" :style="{width:totalData.shiftYield/totalData.planYield*100+'%'}"></div>
            </div>
            <div class="classplanyeild">
              <span>{{ languagePack.twentyfour }} {{ totalData.planYield || 0 }}{{ languagePack.twenty }}</span>
            </div>
            <div class="yeildline">

            </div>
            <div class="yeildcircle">

            </div>
          </div>
        </div>
        <div class="smallBox">
          <span class="boxtitle">{{ languagePack.six }}</span>
          <span class="boxYtdval">
                        <span class="ytdvalname">{{ languagePack.twentyfive }}</span>
                        <span class="ytdvalval">{{ mtbfYtd }}/h</span>
                    </span>
          <div class="echartsBox" id="mtbfechart"></div>
          <div class="echartsIcon">
            <img width="28px" src="~images/bigScreen/devOverview/mtbficon.png" alt/>
            <span>MTBF</span>
          </div>
        </div>
      </div>
      <div class="rightBox">
        <div class="oneBox">
          <span class="boxtitle">{{ languagePack.three }}</span>
          <span class="boxYtdval">
                        <span class="ytdvalname">{{ languagePack.twentyfive }}</span>
                        <span class="ytdvalval">{{ mttrfYtd }}/min</span>
                    </span>
          <div class="echartsBox" id="mttrechart"></div>
          <div class="echartsIcon">
            <img width="28px" src="~images/bigScreen/devOverview/mttricon.png" alt/>
            <span>MTTR</span>
          </div>
        </div>
        <div class="twoBox">
          <span class="boxtitle">{{ languagePack.four }}</span>
          <span class="boxYtdval">
                        <span class="ytdvalname">{{ languagePack.twentyfive }}</span>
                        <span class="ytdvalval">{{ monthoeeYtd || 0 }}%</span>
                    </span>
          <div class="echartsBox" id="oeeMonthchart"></div>
          <div class="echartsIcon">
            <img width="16px" src="~images/bigScreen/devOverview/yellowCircle.png" alt/>
            <span>{{ languagePack.twentysix }}</span>
            <img width="16px" src="~images/bigScreen/devOverview/greenCircle.png" alt/>
            <span>{{ languagePack.twentyseven }}</span>
            <img width="16px" src="~images/bigScreen/devOverview/redCircle.png" alt/>
            <span>{{ languagePack.twentyeight }}</span>
            <span class="arrow">→</span>
            <span>{{ languagePack.twentynine }}</span>
            <span class="arrow">↘</span>
            <span>{{ languagePack.thirty }}</span>
            <span class="arrow">↗</span>
            <span>{{ languagePack.thirtyone }}</span>
          </div>

        </div>
        <div class="threeBox">
          <span class="boxtitle">{{ languagePack.five }}</span>
          <div class="qvaltitle">
            <span>{{ languagePack.thirtytwo }}</span>
          </div>
          <div class="qvaltitle1">
            <span>{{ languagePack.thirtythree }}</span>
          </div>
          <div id="qvalWeek" class="echartBox" @click="goOther"></div>
          <div id="qvalMonth" class="echartBox" @click="goOther"></div>
        </div>
        <div class="fourBox">
          <span class="boxtitle">{{ languagePack.seven }}</span>
          <div class="tableBox">
            <div class="tabHeader">
              <span v-for="(item,index) of languagePack.ten" :key="index"
                    :style="index==3?'width:13%':index==4||index==5?'width:12%':index==8?'width:19%':''">{{ item }}</span>
            </div>
            <div class="tabContent">
              <div :class="index % 2 == 0?'tabRow1':'tabRow2'" v-for="(item,index) of tabData" :key="index">
                <span style="color:#fff">{{ item.lineName }}</span>
                <div class="statusLight">
                  <div style="border:1px solid rgb(55,211,118)" class="lightBorder" v-if="item.state==1">
                    <img width="20px" src="~images/bigScreen/devOverview/run.png" alt/>
                    <span style="color:rgb(55,211,118)">{{ languagePack.sixteen }}</span>
                  </div>
                  <div style="border:1px solid rgb(253,171,7)" class="lightBorder" v-if="item.state==2">
                    <img width="20px" src="~images/bigScreen/devOverview/standby.png" alt/>
                    <span style="color:rgb(253,171,7)">{{ languagePack.seventeen }}</span>
                  </div>
                  <div style="border:1px solid rgb(242,61,33)" class="lightBorder" v-if="item.state==5">
                    <img width="20px" src="~images/bigScreen/devOverview/alarm.png" alt/>
                    <span style="color:rgb(242,61,33)">{{ languagePack.eighteen }}</span>
                  </div>
                  <div style="border:1px solid rgb(97,111,147)" class="lightBorder" v-if="item.state==-99">
                    <img width="20px" src="~images/bigScreen/devOverview/outline.png" alt/>
                    <span style="color:rgb(97,111,147)">{{ languagePack.nineteen }}</span>
                  </div>
                </div>
                <span>{{ item.bottleneckWorkStation }}</span>
                <span style="width:13%">{{ item.avgA }}</span>
                <span style="width:12%">{{ item.monthMTBF }}</span>
                <span style="width:12%">{{ item.monthMTTR }}</span>
                <span>{{ item.classWarningNum }}</span>
                <span>{{ item.monthWarningNum }}</span>
                <span style="width:19%">{{ item.warningTime }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <e-order-q ref="EOrderQ"></e-order-q> -->
  </div>
</template>

<script>
import * as echarts from 'echarts';
import EOrderQ from "./components/EOrderQ"

let moment = window.$this.moment;
let myChart, myChart1, myChart2, myChart3, myChart4, myChart5, myChart6, myChart7;
export default {
  name: "devOverview",
  components: {EOrderQ},
  data() {
    return {
      time: this.$moment(new Date()).format('HH:mm:ss 丨 YYYY/MM/DD'),
      scaleNum: '',
      chineseArr: {
        one: '马达工厂设备总览',
        two: '总览统计',
        three: '设备MTTR分析',
        four: '当年OEE每月情况占比统计',
        five: 'Q值统计',
        six: '设备MTBF分析',
        seven: '产线统计',
        eight: '单位:分钟',
        nine: '单位:小时',
        ten: ['产线', '产线状态', '瓶颈工站', '当月开机率(%)', '当月MTBF(小时)', '当月MTTR(分钟)', '当班报警数', '当月报警数', '当月累计报警时长(分钟)'],
        eleven: '单位:天',
        twelve: '设备总数',
        thirteen: '当前班次OEE',
        fourteen: '当月NEE',
        fifteen: '当年NEE',
        sixteen: '运行',
        seventeen: '待机',
        eighteen: '报警',
        nineteen: '断线',
        twenty: '台',
        twentyone: '当天产量',
        twentytwo: '当月产量',
        twentythree: '当班实际产量',
        twentyfour: '当班计划产量',
        twentyfive: '当年YTD值',
        twentysix: '等于Target',
        twentyseven: '大于Max',
        twentyeight: '小于Min',
        twentynine: '较上月持平',
        thirty: '较上月有下降',
        thirtyone: '较上月有提高',
        thirtytwo: 'Weekly Q值',
        thirtythree: 'Monthly Q值',
        thirtyfour: '',
        thirtyfive: '',
        thirtysix: '',
      },
      englishArr: {
        one: 'CMX Equipment Overview',
        two: 'Overview',
        three: 'MTTR',
        four: 'Monthly OEE',
        five: 'Queue',
        six: 'MTBF',
        seven: 'Line Info',
        eight: 'Unit:Minute',
        nine: 'Unit:Hour',
        ten: ['Line', 'Status', 'Bottleneck', 'Monthly Availability(%)', 'Monthly MTBF(H)', 'Monthly MTTR(mins)', 'Shift Alarm', 'Monthly Alarm', 'Monthly Accumulated Alarm(min)'],
        eleven: 'Unit:Day',
        twelve: 'Quantity',
        thirteen: 'Shift OEE',
        fourteen: 'Monthly NEE',
        fifteen: 'YTD NEE',
        sixteen: 'Running',
        seventeen: 'Waiting',
        eighteen: 'Alarming',
        nineteen: 'Stopping',
        twenty: 'Set',
        twentyone: 'Daily Output',
        twentytwo: 'Monthly Output',
        twentythree: 'Shift Actual Output',
        twentyfour: 'Shift Planning Output',
        twentyfive: 'YTD',
        twentysix: 'Target',
        twentyseven: 'More than Max',
        twentyeight: 'Less than Min',
        twentynine: 'Steady',
        thirty: 'Declined',
        thirtyone: 'Raised',
        thirtytwo: 'Weekly Queue',
        thirtythree: 'Monthly Queue',
        thirtyfour: '',
        thirtyfive: '',
        thirtysix: '',
      },
      tabData: [],
      languageStr: 'English',
      languagePack: {},
      totalData: {
        statusObj: {
          runcount: 0,
          runratio: 0,
          waitcount: 0,
          waitratio: 0,
          alarmcount: 0,
          alarmratio: 0,
          shutcount: 0,
          shutratio: 0,
        }
      },//总览统计数据
      mtbfYtd: '',
      mttrfYtd: '',
      hierarchyCode: 'UPB5IESF6HVNDSW',
      monthoeeYtd: null,
      languageShowF: false
    }
  },
  beforeDestroy(){
    if (this.createTimeId){
      clearInterval(this.createTimeId);
    }
  },
  mounted() {

    // this.timer1 = setInterval(this.refreshTime, 1000);
    // this.languagePack = this.chineseArr
    if (window.localStorage.getItem('language') === 'en_US') {
      this.languageStr = '简体中文'
      this.languagePack = this.englishArr
      this.$i18n.locale = 'en_US'
    } else {
      this.languageStr = 'English'
      this.languagePack = this.chineseArr
      this.$i18n.locale = 'zh_CN'
    }

    let queryInfo = this.$route.query
    if (queryInfo && queryInfo.hierarchyCode) {
      this.hierarchyCode = queryInfo.hierarchyCode
      this.getName()
    }
    this.onresize()
    this.getTime()
    window.addEventListener('resize', this.onresize, false);
    //图表调用
    // this.timer2 = setInterval(this.refreshTime, 180000);
    this.timeCilck()
    this.$service.move(this.$service.pointer)
  },
  methods: {
    getTime(){
      this.axios({
        method: 'get',
        url: '/dms/statistical/getDateTime'
      }).then(res=>{
        if (this.createTimeId){
          clearInterval(this.createTimeId);
        }
        const dateInfo = res.data
        this.time = dateInfo
        let timeNum = Number(new Date(dateInfo).getTime())
        this.createTimeId = setInterval(() => {
          timeNum += 1000
          this.time = this.$moment(new Date(timeNum)).format('YYYY-MM-DD HH:mm:ss');
        }, 1000)
      })
    },
    getName() {
        this.axios({
            method: 'post',
            url: '/dms/large/screen/detail',
            data: {
              url: this.$router.history.current.fullPath
            }
        }).then(res => {
            if (res.code === 200) {
                this.chineseArr.one = res.data.titleCN
                this.englishArr.one = res.data.titleEN
            }
        })
    },
    goOther() {
      //this.$refs.EOrderQ.open();
      this.$router.push({ path: '/EOrderQ'})
      //window.location.replace(process.env.VUE_APP_Q_VALUE_URL)
    },
    goChooseBoard() {
      this.$router.push({path: '/chooseBoard'})
    },
    laugFocus() {
      this.languageShowF = true
    },
    timeCilck() {
      this.getTotalData()
      this.getmonthOEE()
      this.getlineData()
      this.getMTBF()
      this.getMTTR()
      this.getReportQ()
    },
    //切换语言
    changeLaug() {
      if (this.languageStr === 'English') {
        this.languageStr = '简体中文'
        this.languagePack = this.englishArr
        window.localStorage.setItem('language','en_US')
      } else {
        this.languageStr = 'English'
        this.languagePack = this.chineseArr

        window.localStorage.setItem('language','zh_CN')
      }
      this.timeCilck()
    },
    //计算缩放
    onresize() {
      const Width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      const Height = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;
      const scaleW = Width < 1920 ? (Width / 1920) : 1;
      const scaleH = Height < 1080 ? (Height / 1080) : 1;
      this.scaleNum = scaleW > scaleH ? scaleH : scaleW
    },
    //时间戳
    refreshTime() {
      this.time = this.$moment(new Date()).format('HH:mm:ss 丨 YYYY/MM/DD');
    },
    //总览统计接口
    getTotalData() {
      this.axios({
        method: 'get',
        url: '/dms/factoryBoard/statistics',
        params: {
          hierarchyCode: this.hierarchyCode
        }
      }).then(res => {
        if (res.code === 200) {
          this.totalData = res.data
          let obj = {}
          if (res.data.statusRatios) {
            for (let item of res.data.statusRatios) {
              if (item.state === 1) {
                obj.runcount = item.count
                obj.runratio = Number(item.ratio)
              }
              if (item.state === 2) {
                obj.waitcount = item.count
                obj.waitratio = Number(item.ratio)
              }
              if (item.state === 5) {
                obj.alarmcount = item.count
                obj.alarmratio = Number(item.ratio)
              }
              if (item.state === -99) {
                obj.shutcount = item.count
                obj.shutratio = Number(item.ratio)
              }
            }
          }
          this.totalData.statusObj = obj
          let xdata = res.data.statusRatios.map((item) => {
            if (item.state === 1) {
              return {name: item.state, value: item.count, itemStyle: {color: '#30c368'}};
            }
            if (item.state === 2) {
              return {name: item.state, value: item.count, itemStyle: {color: '#f39a00'}};
            }
            if (item.state === 5) {
              return {name: item.state, value: item.count, itemStyle: {color: '#e93446'}};
            }
            if (item.state === -99) {
              return {name: item.state, value: item.count, itemStyle: {color: '#6d95b5'}};
            }
          })
          this.statusRatioChart(xdata, res.data.deviceNum)
          this.openRateEchart(res.data.avgOee)
        } else {
          //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    //每月oee接口
    getmonthOEE() {
      this.axios({
        method: 'get',
        url: '/dms/factoryBoard/monthRatioOEE',
        params: {
          hierarchyCode: this.hierarchyCode
        }
      }).then(res => {
        if (res.code === 200) {
          let {minOee, maxOee, targetOee, ytd} = res.data
          this.monthoeeYtd = ytd
          let xData = res.data.oeeList.map((item) => {
            if (this.languageStr === 'English') {
              return item.month + '月';
            } else {
              if (item.month === 1) {
                return 'Jan';
              }
              if (item.month === 2) {
                return 'Feb';
              }
              if (item.month === 3) {
                return 'Mar';
              }
              if (item.month === 4) {
                return 'Apr';
              }
              if (item.month === 5) {
                return 'May';
              }
              if (item.month === 6) {
                return 'Jun';
              }
              if (item.month === 7) {
                return 'Jul';
              }
              if (item.month === 8) {
                return 'Aug';
              }
              if (item.month === 9) {
                return 'Sep';
              }
              if (item.month === 10) {
                return 'Oct';
              }
              if (item.month === 11) {
                return 'Nov';
              }
              if (item.month === 12) {
                return 'Dec';
              }
            }
          })
          let yData = res.data.oeeList.map((item) => {
            let symbol
            if (item.color === 1) {
              symbol = 'image://' + require('@/assets/images/bigScreen/devOverview/yellowCircle.png')
            }
            if (item.color === 2) {
              symbol = 'image://' + require('@/assets/images/bigScreen/devOverview/greenCircle.png')
            }
            if (item.color === 3) {
              symbol = 'image://' + require('@/assets/images/bigScreen/devOverview/redCircle.png')
            }
            if (item.color === 0) {
              symbol = 'image://' + require('@/assets/images/bigScreen/devOverview/toum.png')
            }
            return {value: item.avgOee, trend: item.trend, symbol: symbol};
          })
          let yData1 = res.data.oeeList.map((item) => {
            return {value: item.avgOee, trend: item.trend};
          })
          this.monthOEEEchart(minOee, maxOee, targetOee, xData, yData, yData1)
        } else {
          //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    //产线统计
    getlineData() {
      this.axios({
        method: 'get',
        url: '/dms/factoryBoard/line',
        params: {
          hierarchyCode: this.hierarchyCode
        }
      }).then(res => {
        if (res.code === 200) {
          this.tabData = res.data
        } else {
          //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    //q值统计
    getReportQ() {
      this.axios({
        method: 'get',
        url: '/dms/factoryBoard/reportQ',
        params: {
          hierarchyCode: this.hierarchyCode
        }
      }).then(res => {
        if (res.code === 200) {
          let xData = res.data[0].map((item) => {
            return item.lineName;
          })
          let yData1 = res.data[0].map((item) => {
            return item.q;
          })
          let yData2 = res.data[0].map((item) => {
            return [item.lineName, item.q];
          })
          let xxData = res.data[1].map((item) => {
            return item.lineName;
          })
          let yyData1 = res.data[1].map((item) => {
            return item.q;
          })
          let yyData2 = res.data[1].map((item) => {
            return [item.lineName, item.q];
          })
          this.qvalWeekChart(xData, yData1, yData2)
          this.qvalMonthChart(xxData, yyData1, yyData2)
        } else {
          //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    //mtbf接口
    getMTBF() {
      this.axios({
        method: 'get',
        url: '/dms/statistical/mtbfInfo',
        params: {
          deviceNo: '',
          orgCode: this.hierarchyCode,
          type: 0,
          startDate: '',
          endDate: '',
        }
      }).then(res => {
        if (res.code === 200) {
          this.mtbfYtd = res.data.ytd
          let xData = res.data.mtbfVoList.map((item) => {
            return item.applyDate.substring(5, 10);
          })
          let yData = res.data.mtbfVoList.map((item) => {
            return item.mtbf;
          })
          this.mtbfChart(xData, yData)
        } else {
          //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    //mttr接口
    getMTTR() {
      this.axios({
        method: 'get',
        url: '/dms/statistical/mttrInfo',
        params: {
          deviceNo: '',
          orgCode: this.hierarchyCode,
          type: 0,
          startDate: '',
          endDate: '',
        }
      }).then(res => {
        if (res.code === 200) {
          this.mttrfYtd = res.data.ytd
          let xData = res.data.mttrVoList.map((item) => {
            return item.applyDate.substring(5, 10);
          })
          let yData = res.data.mttrVoList.map((item) => {
            return item.mttr;
          })
          this.mttrChart(xData, yData)
        } else {
          //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    //状态占比
    statusRatioChart(xdata, deviceNum) {
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      myChart = echarts.init(document.getElementById("statusRatio"));
      myChart.setOption({
        title: {
          // 主标题样式
          textStyle: {
            color: '#fff',
            fontSize: 24,
          },
          itemGap: 7,
          text: deviceNum,//设备数量
          subtext: this.languagePack.twelve,
          // 副标题样式
          subtextStyle: {
            color: '#fff',
            fontSize: 16
          },
          left: 'center',
          top: '36%'
        },
        series: [
          {
            type: 'pie',
            radius: ['48%', '64%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: xdata
          },
        ]
      });
      window.addEventListener("resize", function () {
        myChart.resize(); //myChart指自己定义的echartsDom对象
      });
    },
    //OEE
    openRateEchart(avgOee) {
      if (myChart1 != null && myChart1 != "" && myChart1 != undefined) {
        myChart1.dispose(); //销毁
      }
      myChart1 = echarts.init(document.getElementById("openRateEchartDiv"));
      myChart1.setOption({
        title: {
          // 主标题样式
          textStyle: {
            color: '#fff',
            fontSize: 18,
          },
          itemGap: 2,
          text: 'OEE',//设备数量
          subtext: this.languagePack.thirteen,
          // 副标题样式
          subtextStyle: {
            color: 'rgb(168,196,207)',
            fontSize: 12
          },
          left: 'center',
          top: '70%'
        },
        series: [
          {
            type: 'gauge',
            radius: '61%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgb(13,156,255)',
                },
                {
                  offset: 1,
                  color: 'rgb(0,245,253)',
                },
              ])
            },
            pointer: {
              show: false
            },
            progress: {
              show: true,
              width: 13
            },
            axisLine: {
              lineStyle: {
                width: 13,
                color: [[1, 'rgb(1,7,14)']]
              }
            },
            detail: {
              show: true,
              offsetCenter: [0, '8%'],
              formatter: '{value}%',
              textStyle: {
                fontSize: 18,
                color: '#fff'
              }
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              color: '#999',
              fontSize: 0
            },
            data: [
              {
                value: avgOee
              }
            ]
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart1.resize(); //myChart指自己定义的echartsDom对象
      });
    },
    //每月OEE
    monthOEEEchart(minOee, maxOee, targetOee, xData, yData, yData1) {
      if (myChart2 != null && myChart2 != "" && myChart2 != undefined) {
        myChart2.dispose(); //销毁
      }
      myChart2 = echarts.init(document.getElementById("oeeMonthchart"));
      myChart2.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        grid: {
          left: '1%',
          right: '6%',
          bottom: '0%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            color: "rgb(233, 233, 233)"
          },
          axisTick: { //轴刻度线
            show: false
          },
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value}%',
            color: "rgb(202, 202, 202)"
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgb(42,74,104)'
            }
          }
        },
        series: [
          {
            name: "glyph",
            type: "pictorialBar",
            tooltip: {
              show: false
            },
            barGap: "-100%",
            symbolPosition: "end",
            symbolSize: 25,
            symbolOffset: ["0%", "-105%"],
            data: yData,
            zlevel: 100
          },
          {
            data: yData1,
            barWidth: '20',
            zlevel: 101,
            type: 'bar',
            itemStyle: {
              normal: {
                label: {
                  formatter: function (item) {
                    //到时候根据数据判断展示哪个
                    if (item.data.trend === 1) {
                      return '→';
                    } else if (item.data.trend === 2) {
                      return '↘';
                    } else if (item.data.trend === 3) {
                      return '↗';
                    } else {
                      return ''
                    }
                  },
                  show: true,
                  position: 'top',
                  textStyle: {
                    fontWeight: "bolder",
                    fontSize: "14",
                    color: "#fff"
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: 'rgb(35,204,255)'},
                  {offset: 0.5, color: 'rgb(35,204,255)'},
                  {offset: 1, color: 'rgb(35,204,255)'}
                ]),
                opacity: 1,
              },
            },
            markLine: {
              symbol: "none",
              data: [
                {
                  name: '基准线',
                  yAxis: minOee,
                  lineStyle: {
                    normal: {
                      color: "rgb(119,38,42)",
                      width: 1,
                    }
                  },
                  label: {
                    show: true,
                    position: 'end',
                    formatter: 'Min',
                    color: "rgb(222, 222, 222)",
                    borderType: 'solid',
                    borderColor: 'rgb(119,38,42)',
                    backgroundColor: 'rgb(119,38,42)',
                    borderWidth: 2
                  }
                },
                {
                  name: '基准线',
                  yAxis: targetOee,
                  lineStyle: {
                    normal: {
                      color: "rgb(6,109,79)",
                      width: 1,
                      // type: "solid",
                    }
                  },
                  label: {
                    show: true,
                    position: 'end',
                    formatter: 'Target',
                    color: "rgb(222, 222, 222)",
                    borderType: 'solid',
                    borderColor: 'rgb(6,109,79)',
                    backgroundColor: 'rgb(6,109,79)',
                    borderWidth: 2

                  }
                },
                {
                  name: '基准线',
                  yAxis: maxOee,
                  lineStyle: {
                    normal: {
                      color: "rgb(126,81,8)",
                      width: 1,
                    }
                  },
                  label: {
                    show: true,
                    position: 'end',
                    formatter: 'Max',
                    color: "rgb(222, 222, 222)",
                    borderType: 'solid',
                    borderColor: 'rgb(126,81,8)',
                    backgroundColor: 'rgb(126,81,8)',
                    borderWidth: 2
                  }
                },
              ]
            },
          },

        ]
      });
      window.addEventListener("resize", function () {
        myChart2.resize(); //myChart指自己定义的echartsDom对象
      });
    },
    //mttr
    mttrChart(xData, yData) {
      if (myChart3 != null && myChart3 != "" && myChart3 != undefined) {
        myChart3.dispose(); //销毁
      }
      myChart3 = echarts.init(document.getElementById("mttrechart"));
      myChart3.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            color: "rgb(233, 233, 233)"
          },
          axisTick: { //轴刻度线
            show: false
          },
        },
        yAxis: {
          type: 'value',
          name: this.languagePack.eight,
          axisLabel: {
            formatter: '{value}',
            color: "rgb(202, 202, 202)"
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgb(42,74,104)'
            }
          }
        },
        series: [
          {
            data: yData,
            type: 'line',
            smooth: true,
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              color: "rgb(193,121,11)",
              borderColor: "#ffffff",
              borderType: "solid",
              borderWidth: 2,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(193,121,11,0.7)'
                },
                {
                  offset: 1,
                  color: 'rgba(193,121,11,0.1)'
                }
              ])
            },
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart3.resize(); //myChart指自己定义的echartsDom对象
      });
    },
    //mtbf
    mtbfChart(xData, yData) {
      if (myChart4 != null && myChart4 != "" && myChart4 != undefined) {
        myChart4.dispose(); //销毁
      }
      myChart4 = echarts.init(document.getElementById("mtbfechart"));
      myChart4.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            color: "rgb(233, 233, 233)"
          },
          axisTick: { //轴刻度线
            show: false
          },
        },
        yAxis: {
          type: 'value',
          name: this.languagePack.nine,
          axisLabel: {
            formatter: '{value}',
            color: "rgb(202, 202, 202)"
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgb(42,74,104)'
            }
          }
        },
        series: [
          {
            data: yData,
            type: 'line',
            smooth: true,
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              color: "rgb(63,185,250)",
              borderColor: "#ffffff",
              borderType: "solid",
              borderWidth: 2,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(63,185,250,0.7)'
                },
                {
                  offset: 1,
                  color: 'rgba(63,185,250,0.1)'
                }
              ])
            },
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart4.resize(); //myChart指自己定义的echartsDom对象
      });
    },
    //Q值 week
    qvalWeekChart(xData, yData1, yData2) {
      if (myChart5 != null && myChart5 != "" && myChart5 != undefined) {
        myChart5.dispose(); //销毁
      }
      myChart5 = echarts.init(document.getElementById("qvalWeek"));
      myChart5.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '0%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            color: "rgb(233, 233, 233)"
          },
          axisTick: { //轴刻度线
            show: false
          },
        },
        yAxis: {
          type: 'value',
          name: this.languagePack.eleven,
          min: 0,
          max: 7,
          interval: 1,
          axisLabel: {
            formatter: '{value}',
            color: "rgb(202, 202, 202)"
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgb(88,88,88)'
            }
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
          },
          {
            type: 'inside',
            start: 0,
            end: 100,
          }
        ],
        series: [
          {
            name: '',
            type: 'effectScatter',
            labelLine: {
              show: true,
            },
            tooltip: {
              show: false
            },
            itemStyle: { // 控制散点的样式
              color: function (arg) {
                const dayNum = arg.data[1]
                if (dayNum < 5) {
                  return 'rgb(243,66,65)'
                } else {
                  return 'rgb(40,200,246)'
                }
              }
            },
            showBackground: true,
            rippleEffect: {
              brushType: 'stroke',
              period: 12,
              scale: '5',
            },
            effectType: 'ripple',
            showEffectOn: 'render',
            symbolSize: 8,
            data: yData2,
          },
          {
            data: yData1,
            type: 'bar',
            barWidth: '1',
            itemStyle: { // 控制散点的样式
              color: function (arg) {
                const dayNum = arg.data
                if (dayNum < 5) {
                  return 'rgb(243,66,65)'
                } else {
                  return 'rgb(40,200,246)'
                }
              }
            },
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart5.resize(); //myChart指自己定义的echartsDom对象
      });
    },
    //Q值 Month
    qvalMonthChart(xxData, yyData1, yyData2) {
      if (myChart6 != null && myChart6 != "" && myChart6 != undefined) {
        myChart6.dispose(); //销毁
      }
      myChart6 = echarts.init(document.getElementById("qvalMonth"));
      myChart6.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '0%',
          top: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xxData,
            axisLabel: {
              color: "rgb(233, 233, 233)"
            },
            axisTick: { //轴刻度线
              show: false
            },
          },
          {
            type: 'category',
            data: xxData,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            },
          }
        ],
        yAxis: {
          type: 'value',
          name: this.languagePack.eleven,
          min: 0,
          max: 31,
          interval: 5,
          axisLabel: {
            formatter: '{value}',
            color: "rgb(202, 202, 202)"
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgb(88,88,88)'
            }
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
          },
          {
            type: 'inside',
            start: 0,
            end: 100,
          }
        ],
        series: [
          {
            data: yyData1,
            type: 'bar',
            barWidth: '20',
            itemStyle: { // 控制散点的样式
              color: 'rgba(180, 180, 180, 0)'
            },
            showBackground: true,
            tooltip: {
              show: false
            },
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.1)'
            }
          },
          {
            name: '',
            type: 'effectScatter',
            itemStyle: { // 控制散点的样式
              color: function (arg) {
                const dayNum = arg.data[1]
                if (dayNum < 25) {
                  return 'rgb(243,66,65)'
                } else {
                  return 'rgb(40,200,246)'
                }
              }
            },
            symbolSize: 6,
            data: yyData2,
          },
          {
            data: yyData1,
            tooltip: {
              show: false
            },
            type: 'bar',
            barWidth: '2',
            xAxisIndex: 1,
            itemStyle: { // 控制散点的样式
              color: function (arg) {
                const dayNum = arg.data
                if (dayNum < 25) {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: 'rgba(243,66,65,0.9)'},
                    {offset: 0.5, color: 'rgba(243,66,65,0.7)'},
                    {offset: 1, color: 'rgba(243,66,65,0)'}
                  ])
                } else {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: 'rgba(40,200,246,0.9)'},
                    {offset: 0.5, color: 'rgba(40,200,246,0.7)'},
                    {offset: 1, color: 'rgba(40,200,246,0)'}
                  ])
                }
              }
            },
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart6.resize(); //myChart指自己定义的echartsDom对象
      });
    },
  },
  deactivated() {
    clearInterval(this.timer1);
    clearInterval(this.timer2);
    window.removeEventListener('resize', this.onresize, false);
  },
  beforeRouteLeave(to, from, next) {
    clearInterval(this.timer1);
    clearInterval(this.timer2);
    window.removeEventListener('resize', this.onresize, false);
    next()
  },
}
</script>

<style scoped lang="scss">
.devOverview {
  background: url(~images/bigScreen/devOverview/bg.png) no-repeat;
  background-size: cover;
  height: 1080px;
  width: 1920px;
  position: relative;
  overflow: hidden;

  .title {
    background: url(~images/bigScreen/devOverview/header.png) no-repeat;
    background-size: cover;
    height: 81px;
    width: 1920px;
    display: flex;
    justify-content: center;
    padding: 6px 0;

    .timer {
      position: absolute;
      right: 156px;
      top: 20px;
      color: #fff;

      span {
        font-size: 20px;
      }

      // font-family: 'digifacewide';
    }

    .laugBox {
      position: absolute;
      right: 10px;
      top: 12px;
      background: rgb(2, 25, 49);
      padding: 5px;
      cursor: pointer;

      .changeLau {
        background: url(~images/bigScreen/motorFactory/lauBox.png) no-repeat;
        background-size: cover;
        height: 37px;
        width: 120px;
        padding: 0 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          color: #fff;
          font-size: 16px;
        }
      }
    }

    .lightBox {
      background: url(~images/bigScreen/devOverview/light.png) no-repeat;
      background-size: cover;
      height: 124px;
      width: 500px;
      position: absolute;
      top: 36px;
    }

    .logo {
      background: url(~images/bigScreen/motorFactory/logo.png) no-repeat;
      background-size: cover;
      width: 106px;
      height: 54px;
      position: absolute;
      left: 10px;
    }

    .chinacontent {
      span {
        font-size: 32px;
      }

      font-weight: bold;
      line-height: 68px;
      letter-spacing: 15px;
      color: #fff;
      text-shadow: 1px 1px 1px #fff;
    }

    .encontent {
      span {
        font-size: 32px;
      }

      font-weight: bold;
      line-height: 68px;
      color: #fff;
      text-shadow: 1px 1px 1px #fff;
    }
  }

  .mainContent {
    width: 100%;
    margin: 10px 0;
    height: calc(100% - 101px);
    display: flex;
    justify-content: space-between;
    padding: 0 15px;

    .leftBox {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 541px;

      .bigBox {
        background: url(~images/bigScreen/devOverview/totalstatistical.png) no-repeat;
        background-size: cover;
        height: 607px;
        width: 541px;
        position: relative;
        padding: 55px 0 20px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        .boxtitle {
          position: absolute;
          font-size: 18px;
          font-weight: bold;
          color: rgb(51, 189, 233);
          top: 12px;
          left: 65px;
        }

        .devTotal {
          background: url(~images/bigScreen/devOverview/devTotal.png) no-repeat;
          background-size: cover;
          height: 198px;
          width: 498px;
          display: flex;

          .devTotaleChart {
            width: 43.8%;
          }

          .devTotaleChart1 {
            width: 56.2%;
            padding: 0 15px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;

            .statusline {
              width: 45%;

              .procontent {
                display: flex;
                justify-content: space-between;

                span {
                  font-size: 14px;
                  color: rgb(200, 200, 200);
                }
              }
            }

          }
        }

        .devOeebg {
          display: flex;
          justify-content: space-between;
          width: 498px;

          .oeeone {
            background: url(~images/bigScreen/devOverview/oeebg.png) no-repeat;
            background-size: cover;
            height: 165px;
            width: 224px;
            // padding-top: 25px;
          }

          .oeetwo {
            background: url(~images/bigScreen/devOverview/neebg.png) no-repeat;
            background-size: cover;
            height: 165px;
            width: 262px;
            display: flex;

            .twooeeleft {
              width: 38%;
              height: 100%;
            }

            .twooeeright {
              width: 56%;
              height: 100%;

              .oeerightBox {
                height: 50%;

                .rightboxPro {
                  display: flex;
                  align-items: center;
                  height: 37px;

                  .boxProhalf {
                    width: 50%;
                    padding-left: 4px;
                    display: flex;
                    align-items: center;
                    color: rgb(33, 192, 226);
                    font-size: 16px;
                  }

                  .boxProhalf1 {
                    width: 50%;
                    padding-right: 6px;
                    display: flex;
                    align-items: center;
                  }
                }

                .rightboxTitle {
                  height: 38px;
                  color: rgb(196, 196, 196);
                  font-size: 16px;
                  display: flex;
                  align-items: flex-end;
                }
              }

              .oeerightBox1 {
                height: 50%;

                .rightboxPro {
                  display: flex;
                  align-items: center;
                  height: 31px;

                  .boxProhalf {
                    width: 50%;
                    padding-left: 4px;
                    display: flex;
                    align-items: center;
                    color: rgb(33, 192, 226);
                    font-size: 16px;
                  }

                  .boxProhalf1 {
                    width: 50%;
                    padding-right: 6px;
                    display: flex;
                    align-items: center;
                  }
                }

                .rightboxTitle {
                  height: 34px;
                  color: rgb(196, 196, 196);
                  font-size: 16px;
                  display: flex;
                  align-items: flex-end;
                }
              }
            }
          }
        }

        .devYeildbg {
          background: url(~images/bigScreen/devOverview/yeildbg.png) no-repeat;
          background-size: cover;
          height: 131px;
          width: 498px;
          position: relative;

          .yeildDay {
            position: absolute;
            width: 65px;
            height: 90%;
            left: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .onespan {
              color: #fff;
              font-size: 18px;

              .onespanchild {
                font-size: 12px;
              }
            }

            .twospan {
              color: rgb(196, 196, 196);
              text-align: center;
            }
          }

          .yeildMonth {
            position: absolute;
            width: 65px;
            height: 90%;
            left: 140px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .onespan {
              color: #fff;
              font-size: 18px;

              .onespanchild {
                font-size: 12px;
              }
            }

            .twospan {
              color: rgb(196, 196, 196);
              text-align: center;
            }
          }

          .classyeild {
            position: absolute;
            height: 100%;
            top: 10px;
            left: 250px;
            color: rgb(2, 209, 137);
            font-size: 16px;
          }

          .classyeildPro {
            position: absolute;
            height: 22px;
            width: 226px;
            top: 39px;
            left: 253px;
            display: flex;

            .yeildproval {
              background: rgb(2, 209, 137);
              height: 100%;
            }
          }

          .classplanyeild {
            position: absolute;
            height: 100%;
            top: 68px;
            right: 24px;
            color: rgb(18, 155, 235);
            font-size: 16px;
          }

          .yeildline {
            position: absolute;
            height: 16px;
            width: 1px;
            top: 66px;
            right: 15px;
            border-right: 2px dotted rgba(12, 155, 255, 0.5);
          }

          .yeildcircle {
            position: absolute;
            height: 10px;
            width: 10px;
            top: 76px;
            right: 11px;
            border-radius: 50%;
            background: rgb(17, 87, 142);
            border: 2px solid rgb(26, 141, 221);
          }
        }
      }

      .smallBox {
        background: url(~images/bigScreen/devOverview/mtbf.png) no-repeat;
        background-size: cover;
        height: 349px;
        width: 540px;
        position: relative;

        .boxtitle {
          position: absolute;
          font-size: 18px;
          font-weight: bold;
          color: rgb(51, 189, 233);
          top: 12px;
          left: 65px;
        }

        .boxYtdval {
          position: absolute;
          top: 45px;
          right: 25px;

          .ytdvalname {
            font-size: 12px;
            color: rgb(196, 196, 196);
            margin-right: 10px;
          }

          .ytdvalval {
            font-size: 14px;
            color: rgb(223, 223, 223);
          }
        }

        .echartsBox {
          margin-top: 60px;
          padding: 0 20px;
          height: 68%;
          width: 100%;
        }

        .echartsIcon {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 58px;

          img {
            height: 10px;
            margin-right: 5px;
          }

          span {
            font-size: 12px;
            color: rgb(196, 196, 196);
          }
        }
      }
    }

    .rightBox {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: stretch;
      align-content: space-around;
      width: 1333px;
      height: 100%;

      .oneBox {
        background: url(~images/bigScreen/devOverview/mttr.png) no-repeat;
        background-size: cover;
        height: 319px;
        width: 540px;
        position: relative;

        .boxtitle {
          position: absolute;
          font-size: 18px;
          font-weight: bold;
          color: rgb(51, 189, 233);
          top: 12px;
          left: 65px;
        }

        .boxYtdval {
          position: absolute;
          top: 45px;
          right: 25px;

          .ytdvalname {
            font-size: 12px;
            color: rgb(196, 196, 196);
            margin-right: 10px;
          }

          .ytdvalval {
            font-size: 14px;
            color: rgb(223, 223, 223);
          }
        }

        .echartsBox {
          margin-top: 60px;
          padding: 0 20px;
          height: 67%;
          width: 100%;
        }

        .echartsIcon {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 58px;

          img {
            height: 10px;
            margin-right: 5px;
          }

          span {
            font-size: 12px;
            color: rgb(196, 196, 196);
          }
        }
      }

      .twoBox {
        background: url(~images/bigScreen/devOverview/oee.png) no-repeat;
        background-size: cover;
        height: 319px;
        width: 776px;
        position: relative;

        .boxtitle {
          position: absolute;
          font-size: 18px;
          font-weight: bold;
          color: rgb(51, 189, 233);
          top: 12px;
          left: 65px;
        }

        .boxYtdval {
          position: absolute;
          top: 45px;
          right: 25px;

          .ytdvalname {
            font-size: 12px;
            color: rgb(196, 196, 196);
            margin-right: 10px;
          }

          .ytdvalval {
            font-size: 14px;
            color: rgb(223, 223, 223);
          }
        }

        .echartsBox {
          margin-top: 60px;
          padding: 0 20px;
          height: 67%;
          width: 100%;
        }

        .echartsIcon {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 58px;

          img {
            height: 16px;
            margin-right: 5px;
          }

          span {
            font-size: 12px;
            color: rgb(196, 196, 196);
            margin-right: 15px;
          }

          .arrow {
            font-size: 16px;
            margin-right: 5px;
          }
        }
      }

      .threeBox {
        background: url(~images/bigScreen/devOverview/qvalue.png) no-repeat;
        background-size: cover;
        height: 271px;
        width: 1333px;
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 60px 25px 35px 25px;

        .boxtitle {
          position: absolute;
          font-size: 18px;
          font-weight: bold;
          color: rgb(51, 189, 233);
          top: 12px;
          left: 65px;
        }

        .qvaltitle {
          background: rgba(32, 50, 76, 0.5);
          width: 120px;
          height: 30px;
          position: absolute;
          left: 510px;
          top: 50px;
          display: flex;
          justify-content: center;
          align-items: center;

          span {
            font-size: 16px;
            color: #fff;
          }
        }

        .qvaltitle1 {
          background: rgba(32, 50, 76, 0.5);
          width: 120px;
          height: 30px;
          position: absolute;
          right: 50px;
          top: 50px;
          display: flex;
          justify-content: center;
          align-items: center;

          span {
            font-size: 16px;
            color: #fff;
          }
        }

        .echartBox {
          height: 100%;
          width: 49%;
        }
      }

      .fourBox {
        background: url(~images/bigScreen/devOverview/linestatistical.png) no-repeat;
        background-size: cover;
        height: 349px;
        width: 1333px;
        position: relative;

        .boxtitle {
          position: absolute;
          font-size: 18px;
          font-weight: bold;
          color: rgb(51, 189, 233);
          top: 12px;
          left: 65px;
        }

        .tableBox {
          width: 100%;
          height: 74%;
          position: relative;
          top: 20%;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          align-content: baseline;

          .tabHeader {
            background: url(~images/bigScreen/devOverview/tableHeader.png) no-repeat;
            background-size: cover;
            height: 42px;
            width: 1293px;
            display: flex;
            align-items: center;

            span {
              font-size: 16px;
              color: rgb(196, 196, 196);
              width: 9%;
              text-align: center;
            }
          }

          .tabContent {
            overflow: scroll;

            &::-webkit-scrollbar {
              width: 0px;
              height: 0px;
            }

            height: 210px;

            .tabRow1 {
              background: url(~images/bigScreen/devOverview/tablerow1.png) no-repeat;
              background-size: cover;
              height: 42px;
              width: 1293px;
              display: flex;
              align-items: center;

              .statusLight {
                width: 9%;
                display: flex;
                align-items: center;
                justify-content: center;

                .lightBorder {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  width: 90px;
                  height: 30px;
                  padding: 0 5px;

                  span {
                    width: 50px;
                    font-size: 14px;
                  }
                }
              }

              span {
                font-size: 16px;
                color: rgb(196, 196, 196);
                width: 9%;
                text-align: center;
              }
            }

            .tabRow2 {
              background: url(~images/bigScreen/devOverview/tablerow2.png) no-repeat;
              background-size: cover;
              height: 42px;
              width: 1293px;
              display: flex;
              align-items: center;

              .statusLight {
                width: 9%;
                display: flex;
                align-items: center;
                justify-content: center;

                .lightBorder {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  width: 90px;
                  height: 30px;
                  padding: 0 5px;

                  span {
                    width: 50px;
                    font-size: 14px;
                  }
                }
              }

              span {
                font-size: 16px;
                color: rgb(196, 196, 196);
                width: 9%;
                text-align: center;
              }
            }
          }

        }
      }
    }
  }
}
</style>

<style lang="scss">
.devOverview {
  .ivu-progress-inner {
    background-color: rgb(4, 53, 76);
  }
}
</style>
